import DataBus from "../databus";
import Utils from "../common/utils";
import {PageStatus} from "../page_status";
import Scene from "./scene";
import {px, winH, winW} from "../libs/utils";
import JsLogic from "./jslogic";
import Img from "../base/img";
import Block from "../base/block";
import CatFootAnim from "../base/cat_foot_anim";
import VerticalText from "../base/vertical_text";
import DialogText from "../base/dialog_text";

const databus = new DataBus()
const atlas = new Image()
atlas.src = 'images/Common.png'
var jsLogic = new JsLogic();
export default class RouteSelect extends Scene {
    constructor() {
        super(0, 0, winW, winH);
        this.isInit = false;
        /// 0：提示点击 1路线高亮显示(路线默认都不显示) 1.1 选择左路线1 1.2选择中间路线 1.3 选择右侧路线
        this.showStatus = 0 ;
        this.selectedLine = null;
    }

    update() {
        super.update();
    }

    initView(ctx) {
        super.initView(ctx);

        var img1 = new Img("js/sub/images/route/img_luxian_board.png", 0, 0, px(640), px(1440));
        this.addChild(img1, "img1")

        this.highLightBg = new Block(0, 0, winW , winH);
        this.highLightBg.bgColor = 'rgba(0,0,0,0.5)';
        this.highLightBg.visible = false
        this.addChild(this.highLightBg,'highLightBg')

        /// *********** 西南西北线 start ****************
        this.hLeftRouteSelect = new Img("js/sub/images/route/img_xibei02.png",  px(40),  px(345), px(438), px(728));
        this.hLeftRouteSelect.visible = false;
        this.addChild(this.hLeftRouteSelect, "hLeftRouteSelect")

        this.hLeftRouteUnSelect = new Img("js/sub/images/route/img_xibei01.png",  px(40),  px(390), px(412), px(680));
        this.hLeftRouteUnSelect.visible = false
        this.addChild(this.hLeftRouteUnSelect, "hLeftRouteUnSelect")

        this.leftText = new VerticalText(px(200),  px(840),px(30),px(160),"西南西北线")
        this.addChild(this.leftText,"leftText")


        // *********** 西南西北线 end ****************

        /// *********** 中线 start ****************
        this.hCenterRouteSelect = new Img("js/sub/images/route/img_zhong02.png",  px(260),  px(410), px(244), px(606));
        this.hCenterRouteSelect.visible = false
        this.addChild(this.hCenterRouteSelect, "hCenterRouteSelect")

        this.hCenterRouteUnSelect = new Img("js/sub/images/route/img_zhong01.png",  px(266),  px(410), px(232), px(602));
        this.hCenterRouteUnSelect.visible = false;
        this.addChild(this.hCenterRouteUnSelect, "hCenterRouteUnSelect")

        this.centerText = new VerticalText(px(420),  px(800),px(30),px(60),"中线")
        this.addChild(this.centerText,'centerText')
        // *********** 中线 end ****************

        // *********** 沿海线 start ****************
        this.hRightRouteSelect = new Img("js/sub/images/route/img_dong02.png",  px(440),  px(400), px(200), px(592));
        this.hRightRouteSelect.visible = false;
        this.addChild(this.hRightRouteSelect, "hRightRouteSelect")

        this.hRightRouteUnSelect = new Img("js/sub/images/route/img_dong01.png",  px(440),  px(400), px(202), px(586));
        this.hRightRouteUnSelect.visible = false
        this.addChild(this.hRightRouteUnSelect, "hRightRouteUnSelect")

        this.rightText = new VerticalText(px(550),  px(820),px(30),px(90),"沿海线")
        this.addChild(this.rightText,'rightText')
        /// *********** 沿海线 end ****************

        //// 点击区域控制
        var clickBlockLeft = new Block(px(0),  px(700),px(300),px(400))
        var clickBlockCenter = new Block(px(300),  px(500),px(180),px(600))
        var clickBlockRight = new Block(px(480),  px(500),px(160),px(600))
        var clickBlockBottom = new Block(px(0),  px(1100),winW,winH-px(600))
        // clickBlockLeft.bgColor="lightBlue"
        // clickBlockCenter.bgColor="red"
        // clickBlockRight.bgColor="#4444"
        // clickBlockBottom.bgColor="blue"
        this.addChild(clickBlockLeft,'clickBlockLeft')
        this.addChild(clickBlockCenter,'clickBlockCenter')
        this.addChild(clickBlockRight,'clickBlockRight')
        this.addChild(clickBlockBottom,'clickBlockBottom')

        this.catFoot = new CatFootAnim('js/sub/images/route/img_cat_foot', 7,  px(260),  px(1050), px(80), px(90), px(80), px(90),180,true);
        // let catFootC = new CatFootAnim('js/sub/images/route/img_cat_foot', 7,  px(400),  px(950), px(80), px(90), px(80), px(90),180,true);
        // let catFootR = new CatFootAnim('js/sub/images/route/img_cat_foot', 7,  winW -px(100),  px(980), px(80), px(90), px(80), px(90),180,true);

        this.catFoot.visible = false;
        this.addChild(this.catFoot, "catFoot")



        var imgDetail = new Img("js/sub/images/route/btn_xiangqing.png", 20,50, px(48), px(48));
        this.addChild(imgDetail, "imgDetail")

        let text1 = '打开喵德地图看一下吧～'
        this.catDialog = new DialogText("js/sub/images/route/img_xinshouk.png",( winW- px(456))/2, winH-60-px(148), px(456), px(148),text1,  (winW- px(456))/2+85,winH-35-px(148))
        this.addChild(this.catDialog,"catDialog")

        this.btnGo = new Img("js/sub/images/route/btn_chufa.png", ( winW- px(164))/2,winH-60-px(144), px(164), px(144));
        this.addChild(this.btnGo, "btnGo")

        this.btnGo.visible = false;

        clickBlockBottom.bindClickEvent(()=>{
            /// 底部区域点击
            console.log('这里走了吗1')
            if(this.showStatus === 0){
                /// 还未高亮的时候 底部区域点击会生效
                this.changeShowStatus(1)
            }

        })
        imgDetail.bindClickEvent(()=>{
            this.selectedLine = null
            /// 问号点击： 再来一遍文字指引动画
            console.log('这里走了吗1')
           this.changeShowStatus(0)
        })

        clickBlockLeft.bindClickEvent(()=>{
            this.selectedLine = "left"
            console.log('这里走了吗2')
            if(this.showStatus === 0){
                /// 还未高亮的时候
                this.changeShowStatus(1);
                return;
            }
            /// 选中左侧线路
            this.changeShowStatus(1.1)
        })
        clickBlockCenter.bindClickEvent(()=>{
            this.selectedLine = "center"
            console.log('这里走了吗4')
            if(this.showStatus === 0){
                /// 还未高亮的时候
                this.changeShowStatus(1);
                return;
            }
            /// 选中中间线路
            this.changeShowStatus(1.2)
        })
        clickBlockRight.bindClickEvent(()=>{
            this.selectedLine = "right"
            console.log('这里走了吗6')
            if(this.showStatus === 0){
                /// 还未高亮的时候
                this.changeShowStatus(1);
                return;
            }
            /// 选中右侧线路
            this.changeShowStatus(1.3)
        })
        this.btnGo.bindClickEvent(()=>{
            console.log('这里走了吗7')
            if(this.btnGo.visible === false){
                return;
            }
            /// 跳转到主页
            databus.gameStatus = PageStatus.TripShow;
            jsLogic.line=this.selectedLine;
        })
    }

    render(ctx) {
        if (databus.gameStatus !== PageStatus.RouteSelect) {
            return;
        }
        this.renderView(ctx);
        super.render(ctx);
    }

    renderView(ctx) {
        // ctx.fillStyle = "#6FB5E3FF"
        // ctx.font = "20px Arial"
        ctx.font = `16px ZCOOL KuaiLe`;
        ctx.fillStyle = "white"

        ctx.drawImage(
            atlas,
            120, 6, 39, 24,
            10,
            winH - databus.stepy - 25,
            80, 40
        )
        ctx.fillText(
            "西北线",
            databus.gap,
            winH - databus.stepy
        )

        ctx.drawImage(
            atlas,
            120, 6, 39, 24,
            winW / 2 - 30,
            winH - databus.stepy - 25,
            55, 40
        )
        ctx.fillText(
            "中线",
            winW / 2 - 25,
            winH - databus.stepy
        )

        ctx.drawImage(
            atlas,
            120, 6, 39, 24,
            winW - 90,
            winH - databus.stepy - 25,
            80, 40
        )

        ctx.fillText(
            '沿海线',
            winW - 80,
            winH - databus.stepy
        )


        this.btnSelectRoute1 = {
            startX: 10,
            startY: winH - databus.stepy - 25,
            endX: 10 + 80,
            endY: winH - databus.stepy - 25 + 40
        }

        this.btnSelectRoute2 = {
            startX: winW / 2 - 30,
            startY: winH - databus.stepy - 25,
            endX: winW / 2 - 30 + 55,
            endY: winH - databus.stepy - 25 + 40
        }

        this.btnSelectRoute3 = {
            startX: winW - 90,
            startY: winH - databus.stepy - 25,
            endX: winW - 90 + 55,
            endY: winH - databus.stepy - 25 + 40
        }
    }

    onTouchEvent(type, x, y, callback) {

        switch (type) {
            case 'touchstart':
                if (databus.gameStatus === PageStatus.RouteSelect) {
                    // if(this.showStatus === 0){
                    //     this.changeShowStatus(1);
                    // }


                    var jsLogic = new JsLogic();
                    if (Utils.inArea({x, y}, this.btnSelectRoute1)) {
                        databus.gameStatus = PageStatus.TripShow;
                        jsLogic.line="right";
                        // jsLogic.line="left";
                    } else if (Utils.inArea({x, y}, this.btnSelectRoute2)) {
                        databus.gameStatus = PageStatus.TripShow;
                        jsLogic.line="right";
                        // jsLogic.line="center";
                    } else if (Utils.inArea({x, y}, this.btnSelectRoute3)) {
                        databus.gameStatus = PageStatus.TripShow;
                        jsLogic.line="right";
                    } else {
                        // databus.gameStatus = PageStatus.GameRunningShow;
                    }
                    callback({message: 'already consumed'})
                }

                break
        }
    }

    changeShowStatus(showStatus){

        if(this.showStatus === showStatus){
            return;
        }
        this.showStatus = showStatus;
        switch (this.showStatus){
            case 1: ///  1路线高亮显示(路线默认都不显示)
                this.leftText.isSelected = false;
                this.centerText.isSelected = false;
                this.rightText.isSelected = false;
                this.showHighLight = true;
                this.btnGo.visible  = false;
                this.catDialog.content = "猫猫准备开始旅程啦！从三条中选择一条路线吧";
                this.highLightBg.visible = true
                this.hLeftRouteSelect.visible = false;
                this.hLeftRouteUnSelect.visible = true;
                this.hCenterRouteSelect.visible = false
                this.hCenterRouteUnSelect.visible = true;
                this.hRightRouteSelect.visible = false;
                this.hRightRouteUnSelect.visible = true;
                this.catFoot.visible = false;
                break;

            case 1.1: /// 1.1 选择左路线1
                this.leftText.isSelected = true;
                this.centerText.isSelected = false;
                this.rightText.isSelected = false;
                this.btnGo.visible  = true;
                this.catDialog.visible = false;
                this.hLeftRouteSelect.visible = true;
                this.hLeftRouteUnSelect.visible = false;
                this.hCenterRouteSelect.visible = false
                this.hCenterRouteUnSelect.visible = true;
                this.hRightRouteSelect.visible = false;
                this.hRightRouteUnSelect.visible = true;
                this.catFoot.visible = true;
                this.catFoot.initX =  px(260)
                this.catFoot.initY =  px(1050)
                break;
            case 1.2: /// 1.2选择中间路线
                this.leftText.isSelected = false;
                this.centerText.isSelected = true;
                this.rightText.isSelected = false;
                this.btnGo.visible  = true;
                this.catDialog.visible = false;
                this.hLeftRouteSelect.visible = false;
                this.hLeftRouteUnSelect.visible = true;
                this.hCenterRouteSelect.visible = true
                this.hCenterRouteUnSelect.visible = false;
                this.hRightRouteSelect.visible = false;
                this.hRightRouteUnSelect.visible = true;
                this.catFoot.visible = true;
                this.catFoot.initX =  px(400)
                this.catFoot.initY =  px(950)

                break;
            case 1.3: /// 1.3 选择右侧路线
                this.leftText.isSelected = false;
                this.centerText.isSelected = false;
                this.rightText.isSelected = true;
                this.btnGo.visible  = true;
                this.catDialog.visible = false;
                this.hLeftRouteSelect.visible = false;
                this.hLeftRouteUnSelect.visible = true;
                this.hCenterRouteSelect.visible = false
                this.hCenterRouteUnSelect.visible = true;
                this.hRightRouteSelect.visible = true;
                this.hRightRouteUnSelect.visible = false;
                this.catFoot.visible = true;
                this.catFoot.initX =  winW -px(100)
                this.catFoot.initY =  px(980)
                break;

            default: ///0：提示点击
                this.highLightBg.visible = false
                this.btnGo.visible  = false;
                this.catDialog.visible = true;
                this.catFoot.visible = false;
                this.leftText.isSelected = false;
                this.centerText.isSelected = false;
                this.rightText.isSelected = false;
                this.hLeftRouteSelect.visible = false;
                this.hLeftRouteUnSelect.visible = false;
                this.hCenterRouteSelect.visible = false
                this.hCenterRouteUnSelect.visible = false;
                this.hRightRouteSelect.visible = false;
                this.hRightRouteUnSelect.visible = false;
                this.catDialog.content = "打开喵德地图看一下吧～";
                break;
        }


    }
}
